<template>
	<yb-overlay :visible.sync="visible" :duration="200" :options="optionsSync">
		<view class="yb-toast yb-flex yb-align-center" :class="{
			'yb-justify-start': vertical == 'top',
			'yb-justify-end': vertical == 'bottom',
			'yb-justify-center': vertical == 'center'
		}">
			<view class="toast yb-flex yb-align-center yb-justify-center" :style="toastStyle">
				<template v-if="type == 'success'">
					<yb-icon custom-class="icon" name="hook-bend" :size="100" :color="optionsSync.color"></yb-icon>
				</template>
				<template v-else-if="type == 'fail'">
					<yb-icon custom-class="icon" name="exclaim" :size="100" :color="optionsSync.color"></yb-icon>
				</template>
				<template v-else-if="type == 'loading'">
					<yb-loading custom-class="icon" :visible="visible" :type="loadingSync.type" :color="loadingSync.color" :size="loadingSync.size"></yb-loading>
				</template>
				<yb-text v-if="message" :value="message" :size="optionsSync.size" :color="optionsSync.color"></yb-text>
			</view>
		</view>
	</yb-overlay>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		data () {
			return {
				visible: false,
				message: '',
				duration: 0,
				options: {},
				type: 'default',
				vertical: 'center'
			}
		},
		computed: {
			optionsSync () {
				return Object.assign({}, {
					bgColor: 'rgba(0,0,0,0.5)',
					color: '#fff',
					radius: 10,
					popout: 'fade',
					size: '32rpx',
					mask: false,
					width: 260,
					height: 260,
					loading: {}
				}, this.options)
			},
			loadingSync () {
				return Object.assign({}, {
					type: 1,
					color: this.optionsSync.color,
					size: 50
				}, Util.typeof(this.optionsSync.loading) == 'Object' ? this.optionsSync.loading : (Util.typeof(this.optionsSync.loading) == 'String' || Util.typeof(this.optionsSync.loading) == 'Number') ? { type: this.optionsSync.loading } : {})
			},
			toastStyle () {
				return this.filterStyle(
					Object.assign({}, {
						'background-color': this.optionsSync.bgColor,
						'border-radius': Util.pixelunit(this.optionsSync.radius)
					}, this.vertical == 'top' ? {
						'margin-top': '200rpx'
					} : this.vertical == 'bottom' ? {
						'margin-bottom': '200rpx'
					} : {}, this.type == 'success' || this.type == 'fail' || this.type == 'loading' ? {
						width: Util.pixelunit(this.optionsSync.width),
						height: Util.pixelunit(this.optionsSync.height)
					} : {
						'max-width': '500rpx',
						'min-width': '300rpx'
					})
				) 
			}
		},
		beforeDestroy() {
			if ( this.toastTimer ) {
				clearTimeout(this.toastTimer)
				this.toastTimer = null
			}
		},
		methods: {
			show ({message, duration, vertical, type, options}) {
				if ( this.toastTimer ) {
					clearTimeout(this.toastTimer)
					this.toastTimer = null
				}
				this.message = message || ''
				this.visible = true
				this.duration = duration || 1000
				this.vertical = vertical || 'center'
				this.options = options || {}
				if ( this.type == 'loading' && !duration ) {
					return
				}
				this.toastTimer = setTimeout(() => {
					this.hide()
				}, this.duration)
			},
			hide () {
				if ( this.toastTimer ) {
					clearTimeout(this.toastTimer)
					this.toastTimer = null
				}
				this.visible = false
			},
			default (data = {}) {
				this.type = 'default'
				this.show(Util.typeof(data) == 'String' ? {message: data} : data)
			},
			success (data = {}) {
				this.type = 'success'
				this.show(Util.typeof(data) == 'String' ? {message: data} : data)
			},
			fail (data = {}) {
				this.type = 'fail'
				this.show(Util.typeof(data) == 'String' ? {message: data} : data)
			},
			loading (data = {}) {
				this.type = 'loading'
				let options = Object.assign({}, {
					mask: {
						color: 'rgba(0,0,0,0)',
						click: false
					}
				}, data?.options || {})
				this.show(Util.typeof(data) == 'String' ? {message: data, options: options} : Object.assign({}, data, {options: options}))
			}
			
		}
	}
</script>

<style scoped>
	.yb-toast {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		pointer-events: none;
		/* #endif */
	}
	.yb-toast .toast {
		padding: 20rpx 40rpx;
		/* #ifndef APP-NVUE */
		pointer-events: auto;
		/* #endif */
	}
	.yb-toast .icon {
		margin-bottom: 20rpx;
	}
</style>